<template>
	<view class="container flex-c">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="navBorder" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">发布方案</text>
		</uni-nav-bar>
		<view class="body flex-c">
			<view class="list radius">
				<view class="list-title flex-r ac">
					<text class="text-large">基本信息</text>
				</view>
				<view class="list-item flex-r">
					<view class="item-title flex-r">
						<image src="@/public/images/apply/bt.png" mode="aspectFit"></image>
						<text>比赛类型</text>
					</view>
					<view class="item-right flex-r" @tap="toggle(true, 'sport', null)">
						<text class="status" v-if="!article.sportId">请选择</text>
						<text class="active" v-else-if="article.sportId !== null">{{sportCodeList[article.sportId - 1].title}}</text>
						<uni-icons type="right" color="#B3B3B3" size="38rpx"></uni-icons>
					</view>
				</view>
			</view>
			<view class="list" v-for="(match, index) in article.matchInfos" :key="index">
				<view class="list-title flex-r ac">
					<text class="text-large">比赛信息</text>
				</view>
				<view class="list-item flex-r">
					<view class="item-title flex-r">
						<image src="@/public/images/apply/bt.png" mode="aspectFit"></image>
						<text>竞彩类型</text>
					</view>
					<view class="item-right flex-r" @tap="toggle(true, 'lottery', index)">
						<text class="status" v-if="!match.lotteryType">请选择</text>
						<text class="active" v-else-if="article.sportId !== null">{{lotteryTypeList[article.sportId - 1][lotteryTypeIndex[index]].title}}</text>
						<uni-icons type="right" color="#B3B3B3" size="38rpx"></uni-icons>
					</view>
				</view>
				<view class="list-item flex-r">
					<view class="item-title flex-r">
						<image src="@/public/images/apply/bt.png" mode="aspectFit"></image>
						<text>玩法类型</text>
					</view>
					<view class="item-right flex-r" @tap="toggle(true, 'play', index)">
						<text class="status" v-if="!match.playType">请选择</text>
						<text class="active" v-else-if="article.sportId !== null">{{playTypeList[article.sportId - 1][playTypeIndex[index]].title}}</text>
						<uni-icons type="right" color="#B3B3B3" size="38rpx"></uni-icons>
					</view>
				</view>
				<view class="list-item flex-c">
					<view class="item-select flex-r">
						<view class="item-title flex-r">
							<image src="@/public/images/apply/bt.png" mode="aspectFit"></image>
							<text>比赛</text>
						</view>
						<view class="item-right flex-r" @tap="selectMatch(index)">
							<text class="active" v-if="article.matchInfos[index] && article.matchInfos[index].matchId">重新选择</text>
							<text class="status" v-else>请选择</text>
							<uni-icons type="right" color="#B3B3B3" size="38rpx"></uni-icons>
						</view>
					</view>
					<view class="item-match flex-c ac" v-if="matchInfo[index]">
						<view class="match-desc text-mini color-grey flex-r ac">
							<text class="left text-hidden">{{matchInfo[index].shortNameZh}}</text>
							<view class="center flex-r ac jc">
								<uni-dateformat class="datetime" :date="matchInfo[index].matchTime" format="MM.dd hh:mm"></uni-dateformat>
								<text v-if="matchInfo[index].lotteryType == 201">{{ $CHS.getMatchBasketStatus(matchInfo[index].statusId) }}</text>
								<text v-else>{{ $CHS.getMatchFootStatus(matchInfo[index].statusId) }}</text>
							</view>
							<text class="right"></text>
						</view>
						<view class="match-info flex-r">
							<view class="home flex-r">
								<text class="color-grey text-mini">{{matchInfo[index].lotteryType !== 201 ? '[主]' : '[客]'}}</text>
								<text class="text-bold">{{matchInfo[index].lotteryType !== 201 ? matchInfo[index].homeNameZh : matchInfo[index].awayNameZh}}</text>
							</view>
							<view class="color-black flex-r">
								<text>VS</text>
							</view>
							<view class="away flex-r">
								<text class="text-bold">{{matchInfo[index].lotteryType !== 201 ? matchInfo[index].awayNameZh : matchInfo[index].homeNameZh}}</text>
								<text class="color-grey text-mini">{{matchInfo[index].lotteryType !== 201 ? '[客]' : '[主]'}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="list-item flex-c">
					<view class="item-select flex-r">
						<view class="item-title flex-r">
							<image src="@/public/images/apply/bt.png" mode="aspectFit"></image>
							<text>玩法推荐</text>
						</view>
						<view class="item-right flex-r">
							<text class="status" v-if="!matchInfo[index]">请选择完玩法类型和比赛后选择</text>
						</view>
					</view>
					<view class="item-playbox" v-if="matchInfo[index] && matchZsInfo[index]">
						<view class="flex-c" v-if="match.playType == 1">
							<PlayType class="mt2" v-if="matchZsInfo[0]['spf']" type="spf" :isSame="matchInfo[0].isSame" :scores="matchZsInfo[0]['spf']" :isReset="activeReset[0]" @forecast="forecast($event, 0)"></PlayType>
							<PlayType v-if="matchZsInfo[0]['rqspf']" type="rqspf" :isSame="matchInfo[0].isSame" :scores="matchZsInfo[0]['rqspf']" :isReset="activeReset[0]" @forecast="forecast($event, 0)"></PlayType>
							<PlayType class="mt2" v-if="matchZsInfo[0]['rqsf']" type="rqsf" :isSame="matchInfo[0].isSame" :scores="matchZsInfo[0]['rqsf']" @forecast="forecast($event, 0)"></PlayType>
							<PlayType class="mt2" v-if="matchZsInfo[0]['rfsf']" type="rfsf" :isSame="matchInfo[0].isSame" :scores="matchZsInfo[0]['rfsf']" @forecast="forecast($event, 0)"></PlayType>
						</view>
						<view class="flex-c" v-if="match.playType == 2">
							<PlayType class="mt2" v-if="matchZsInfo[0]['jq']" type="jq" :isSame="matchInfo[0].isSame" :scores="matchZsInfo[0]['jq']" @forecast="forecast($event, 0)" :matchZs="matchZs" :jqIsBig="jqIsBig" :dxqIsBig="dxqIsBig" @getForecast="getForecast"></PlayType>
							<PlayType class="mt2" v-if="matchZsInfo[0]['dxq']" type="dxq" :isSame="matchInfo[0].isSame" :scores="matchZsInfo[0]['dxq']" @forecast="forecast($event, 0)" :matchZs="matchZs" :jqIsBig="jqIsBig" :dxqIsBig="dxqIsBig" @getForecast="getForecast"></PlayType>
							<PlayType class="mt2" v-if="matchZsInfo[0]['dxf']" type="dxf" :isSame="matchInfo[0].isSame" :scores="matchZsInfo[0]['dxf']" @forecast="forecast($event, 0)"></PlayType>
						</view>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="list-title flex-r ac">
					<text class="text-large">方案信息</text>
				</view>
				<view class="list-item flex-r content">
					<view class="item-title flex-r">
						<image src="@/public/images/apply/bt.png" mode="aspectFit"></image>
						<text>方案标题</text>
					</view>
					<view class="item-right flex-r">
						<textarea 
							class="textarea" 
							:class="lineCount > 1 ? 'tal' : 'tar'" 
							v-model="article.title" 
							:minlength="10" 
							:maxlength="30" 
							:auto-height="true" 
							@blur="inputBlur"
							@linechange="lineChange" 
							@input="inputTitle"
							placeholder="请输入">
						</textarea>
					</view>
				</view>
				<view class="list-item flex-r ac content">
					<view class="item-title flex-r">
						<image src="@/public/images/apply/bt.png" mode="aspectFit"></image>
						<text>分析内容</text>
					</view>
					<view class="item-right flex-r" @tap="goEditor('freeContent')">
						<text class="status" v-if="!article.freeContent">请前往编辑器输入分析内容</text>
						<text class="active" v-else>已填写</text>
						<uni-icons type="right" color="#B3B3B3" size="38rpx"></uni-icons>
					</view>
				</view>
				<!-- <view class="list-item flex-r ac content">
					<view class="item-title flex-r">
						<image src="@/public/images/apply/bt.png" mode="aspectFit"></image>
						<text>分析内容</text>
					</view>
					<view class="item-right flex-r" @tap="goEditor('content')">
						<text class="status" v-if="!article.content">请前往编辑器输入分析内容</text>
						<text class="active" v-else>已填写</text>
						<uni-icons type="right" color="#B3B3B3" size="38rpx"></uni-icons>
					</view>
				</view> -->
			</view>
		</view>
		<view class="foot bottom-ios">
			<view class="submit-box" @tap="submitPublish()">
				<button :class="{'active': canSubmit}">发布</button>
			</view>
		</view>
		<PickerPopup v-if="visible" :type="pickerType" :data="dataList" :select="selectIndex" :title="pickerTitle" @change="pickChange" @close="visible=false"></PickerPopup>
	</view>
</template>

<script>
	const matchInfoModel = {
		expertForecasts: [],
		isSame: 1,
		issueNum: null,
		lotteryType: null,
		matchId: null,
		playType: null,
		sportId: null
	}
	import * as qiniu from 'qiniu-js'
	export default {
		data() {
			return {
				visible: false,
				dataList: [],
				selectIndex: 0,
				pickerTitle: '',
				pickerType: null,
				matchIndex: null,

				sportCodeList: [
					{title: '足球', value: 1},
					{title: '篮球', value: 2}
				],
				lotteryTypeList: [
					[{title: '竞足', value: 101},{title: '北单', value: 301}],
					[{title: '竞篮', value: 201}]
				],
				playTypeList: [
					[{ title: '让球', value: 1 },{ title: '大小球', value: 2 }],
					[{ title: '让分', value: 1 },{ title: '大小分', value: 2 }],
				],
				lotteryTypeIndex: [],
				playTypeIndex: [],
				activeReset: [],
				
				matchList: [],
				matchInfo: [],
				matchZsInfo: [],
				matchTwoShow: false,
				
				article: {
					articleType: 1,
					forumId: null,
					sportId: null,
					matchInfos: [{...matchInfoModel}],
					title: null,
					freeContent: null
				},
				toast: {
					sportId: '请选择比赛类型',
					matchInfos: '请推荐玩法',
					title: '请输入方案标题',
					freeContent: '请输入分析内容',
				},
				
				lineCount: 0,
				canLeave: false,
				navBorder: false,
				matchZs:'3',//即时指数，默认为3,
				jqIsBig:0,//是否选中进球，默认没选中，1为大球，2为小球，
				dxqIsBig:0,//是否选中dxq,默认没选中，1为大球，2为小球
			};
		},
		components: {
			PickerPopup: () => import("@/components/ch-popup/ch-pickerpopup.vue"),
			PlayType: () => import("@/components/ch-wanfa/ch-playtype.vue")
		},
		computed: {
			canSubmit() {
				let res = Object.keys(this.article).every((item) => {
					return this.article[item] != null && this.article[item] != ''
				})
				if(res){
					return this.article.matchInfos.length > 0 && this.article.title.length > 10
				}else{
					return false
				}
			}
		},
		watch: {
			"article.sportId"(newValue) {
				this.article.matchInfos = [{...matchInfoModel}]
				this.lotteryTypeIndex = []
				this.playTypeIndex = []
				this.matchList = []
				this.matchInfo = []
				this.matchZsInfo = []
			}
		},
		onLoad() {
			console.log(this.$Route.query);
			if(this.$Route.query.bid){
				this.article.forumId = this.$Route.query.bid
			}else{
				//非法请求处理
				uni.showToast({
					title: '请求数据错误，请返回重试',
					icon: 'none'
				})
				this.$goBack(1)
			}
		},
		onPageScroll(e) {
			if(e.scrollTop > 10){
				this.navBorder = true
			}else{
				this.navBorder = false
			}
		},
		beforeRouteLeave(to, from, next) {
			console.log(to);
			if(to.name == 'barhome'){
				if(this.canLeave || !this.article.freeContent){
					next()
				}else{
					uni.showModal({
						title:'返回提示',
						content: '确认要放弃当前方案内容吗？',
						confirmText: '确认',
						success: (res) => {
							if(res.confirm){
								this.canLeave = true
								this.$goBack(1)
							}
						}
					})
					next(false)
				}
			}else{
				next()
			}
		},
		methods: {
			//保存提交
			submitPublish() {
				if(this.canSubmit){
					this.testArticleValue(this.article).then((formData) => {
						this.$CHS.getQiniuToken().then(async (result)=>{
							this.token = result.token
							this.imageDomain = result.url
							//开始上传图片
							this.$ShowLoading({show: true})
							if(formData.freeContent){
								let freeContent = await this.relpaceUrlImage(formData.freeContent, 'free')
								if(freeContent){
									formData.freeContent = freeContent
								}else{
									return
								}
							}
							if(formData.content){
								let vipContent = await this.relpaceUrlImage(formData.content, 'vip')
								if(vipContent){
									formData.content = vipContent
								}else{
									return
								}
							}
							//上传结束
							this.$ShowLoading({show: false})
							this.$http.post({
								url: '/api/user/article/add',
								data: formData
							}).then((data) => {
								console.log(data);
								if(data.success){
									//成功提示
									this.$ShowToast({text: '方案发布成功'})
									uni.showToast({
										title: '方案发布成功',
										icon: 'success'
									})
									this.canLeave = true
									this.reload(this.article.forumId)
								}else{
									uni.showToast({
										title: data.message || '方案发布失败',
										icon: 'none'
									})
								}
							}).catch((err) => {
								console.log(err);
								uni.showToast({
									title: '方案发布失败，请稍后重试',
									icon: 'none'
								})
							})
						}).catch((err) => {
							console.log(err);
							uni.showToast({
								title: '网络异常，请重试',
								icon: 'none'
							})
						})
					}).catch((res) => {
						console.log(res);
					})
				}else{
					console.log(this.article);
					if(this.article.title && this.article.title.length < 10){
						uni.showToast({
							title: '标题不少于10个字',
							icon: 'none'
						})
						return
					}
					for(let key in this.article){
						if(!this.article[key] && this.toast[key]){
							uni.showToast({
								title: this.toast[key],
								icon: 'none'
							})
							break
						}
						if(key == 'matchInfos' && this.article[key][0]){
							for(let match of this.article[key]){
								if(!match.matchId){
									uni.showToast({
										title: '请选择比赛',
										icon: 'none'
									})
									break
								}
								if(!match.expertForecasts || !match.expertForecasts[0]){
									uni.showToast({
										title: '请推荐玩法',
										icon: 'none'
									})
									break
								}
								if(match.lotteryType == 101){
									let test = match.expertForecasts.every((item)=>{
										return item.forecastType == 'rqsf' || item.forecastType == 'dxq'
									})
									if(test){
										uni.showToast({
											title: '请推荐至少一种竞彩玩法',
											icon: 'none'
										})
										break
									}
								}
							}
						}
					}
				}
			},
			//发布成功后刷新页面
			reload(barId) {
				let pages = getCurrentPages()
				let len = pages.length
				if(len > 1){
					let page = pages[len - 2]
					if(page && page.refreshList){
						setTimeout(()=>{
							page.refreshList(1)
						}, 1000)
					}
					setTimeout(() => {
						this.$goBack(1);
					}, 500)
				}else{
					setTimeout(() => {
						this.$Router.replaceAll({name: 'barhome', params: {bid: barId}})
					}, 500)
				}
			},
			//底部picker开关
			toggle(status, type, index){
				if(status){
					this.pickerType = type
					this.matchIndex = index
					if(type == 'sport'){
						if(this.sportCodeList[0]){
							this.dataList = this.sportCodeList
							this.selectIndex = this.article.sportId ? this.article.sportId - 1 : 0
							this.pickerTitle = '比赛类型'
							this.visible = true
						}else{
							uni.showToast({
								title: '比赛数据异常，请返回重试',
								icon: 'none'
							})
						}
					}else if(type == 'lottery'){
						if(this.article.sportId != null){
							this.dataList = this.lotteryTypeList[this.article.sportId - 1]
							this.selectIndex = this.lotteryTypeIndex[index] || 0
							this.pickerTitle = '竞彩类型'
							this.visible = true
						}else{
							uni.showToast({
								title: '请先选择比赛类型',
								icon: 'none'
							})
						}
					}else if(type == 'play'){
						if(this.article.sportId != null){
							this.dataList = this.playTypeList[this.article.sportId - 1]
							this.selectIndex = this.playTypeIndex[index] || 0
							this.pickerTitle = '玩法类型'
							this.visible = true
						}else{
							uni.showToast({
								title: '请先选择竞彩类型',
								icon: 'none'
							})
						}
					}
				}else{
					this.visible = false
				}
			},
			//picker选择回调
			pickChange({index, type}){
				if(type == 'sport'){
					this.article.sportId = this.sportCodeList[index].value
				}
				if(type == 'lottery'){
					let newValue = this.lotteryTypeList[this.article.sportId - 1][index].value
					if(newValue != this.article.matchInfos[this.matchIndex].lotteryType){
						this.$set(this.lotteryTypeIndex, this.matchIndex, index)
						this.$set(this.playTypeIndex, this.matchIndex, null)
						this.$set(this.article.matchInfos[this.matchIndex], 'lotteryType', newValue)
						this.playTypeChange(null, this.matchIndex)
					}
				}
				if(type == 'play'){
					let newValue = this.playTypeList[this.article.sportId - 1][index].value
					if(newValue != this.article.matchInfos[this.matchIndex].playType){
						this.$set(this.playTypeIndex, this.matchIndex, index)
						this.playTypeChange(newValue, this.matchIndex)
					}
				}
			},
			//选择玩法回调，查询比赛列表
			playTypeChange(playType, index) {
				console.log('重置比赛');
				//重置比赛信息
				this.resetMatchInfo(index);
				this.$set(this.article.matchInfos[index], 'playType', playType)
				if(playType){
					if(this.article.matchInfos[index].lotteryType){
						this.getMatchList(this.article.matchInfos[index].lotteryType, index)
					}else{
						uni.showToast({
							title: '请先选择竞彩类型',
							icon: 'none'
						})
					}
				}else{
					this.$set(this.matchList, index, [])
				}
			},
			//重置比赛数据
			resetMatchInfo(matchIndex, errMsg){
				let matchInfo = {
					expertForecasts: [],
					isSame: 1,
					issueNum: null,
					matchId: null,
					sportId: null
				}
				this.article.matchInfos[matchIndex] = {...this.article.matchInfos[matchIndex], ...matchInfo}
				this.$set(this.matchZsInfo, matchIndex, null);
				this.$set(this.matchInfo, matchIndex, null)
				if(errMsg){
					uni.showToast({
						title: errMsg,
						icon: 'none'
					})
				}
			},
			//选择比赛
			selectMatch(index) {
				if(this.article.matchInfos[index] && this.article.matchInfos[index].playType && this.matchList[0]){
					uni.$once('select', (match)=>{
						if(match != null){
							if(!this.matchInfo[index] || this.matchInfo[index].id != match.id){
								this.getMatchZsInfo(match, index)
							}
						}
					})
					console.log(this.matchInfo);
					let selectMatch = null
					if(this.matchInfo[0] && index == 1){
						console.log(this.matchInfo[0].id);
						selectMatch = this.matchInfo[0].id
					}
					if(this.matchInfo[1] && index == 0){
						console.log(this.matchInfo[1].id);
						selectMatch = this.matchInfo[1].id
					}
					if(selectMatch){
						this.$goByName('publishselectmatch', {lotteryType: this.article.matchInfos[index].lotteryType, matchId: selectMatch});
					}else{
						this.$goByName('publishselectmatch', {lotteryType: this.article.matchInfos[index].lotteryType});
					}
				}else{
					uni.showToast({
						title: '请先选择玩法类型',
						icon: 'none'
					})
				}
			},
			//赛事列表
			getMatchList(lotteryType, index) {
				this.$http.get({
					url: '/api/expertQueryMatchRowsV2',
					data: {
						lotteryType
					}
				}).then((data) => {
					console.log(data);
					if(data.success && data.result[0]){
						this.$set(this.matchList, index, data.result)
					}else{
						this.$set(this.article.matchInfos[index], 'playType', null)
						this.$set(this.playTypeIndex, index, null)
						uni.showToast({
							title: '当前玩法没有比赛，请重新选择',
							icon: 'none'
						})
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//查询赛事指数
			getMatchZsInfo(match, index) {
				this.$http.get({
					url: '/api/expertQueryMatchZsV3',
					data: {
						matchId: match.id,
						lotteryType: match.lotteryType,
						playType: this.article.matchInfos[index].playType,
						sportId: match.lotteryType == 201 ? 2 : 1
					}
				}).then(data => {
					
					if(data.success && data.result){
						let scores = this.$CHS.zsToScores(data.result)
						if(Object.keys(scores).length > 0){
							if(match.lotteryType == 101){//检测指数类型是否符合要求
								let test = Object.keys(scores).every((item)=>{
									return item == 'rqsf' || item == 'dxq'
								})
								if(test){
									uni.showToast({
										title: '当前比赛指数不全，请重新选择',
										icon: 'none'
									})
									return
								}
							}
							let matchInfo = {
								expertForecasts: [],
								isSame: match.isSame?match.isSame:match.isSame==0?0:1,
								issueNum: match.issueNum,
								matchId: match.id,
								sportId: match.lotteryType == 201 ? 2 : 1
							}
							//合并比赛信息
							this.article.matchInfos[index] = {...this.article.matchInfos[index], ...matchInfo}
							this.$set(this.matchInfo, index, match)
							this.$set(this.matchZsInfo, index, scores)
							if(data.result.jq&&data.result.dxq){
								this.matchZs=data.result.dxq.split(',')[1]
							}
						}else{
							uni.showToast({
								title: '当前比赛没有指数，请重新选择',
								icon: 'none'
							})
						}
					}else{
						uni.showToast({
							title: '比赛指数查询错误，请重新选择',
							icon: 'none'
						})
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//玩法预测回调
			forecast(data, index){
				console.log(data,index,'data.data')
				if(this.article.matchInfos[index]){
					let matchForecast = this.article.matchInfos[index].expertForecasts
					console.log(matchForecast)
					if(matchForecast[0]){
						matchForecast = matchForecast.filter(item => item.forecastType != data.type)
						this.article.matchInfos[index].expertForecasts = matchForecast
					}
				}
				if(data.data != null){ 
					//spf rqspf 互斥
					this.resetForecast(data.type, 'spf', 'rqspf', index)
					this.resetForecast(data.type, 'rqspf', 'spf', index)
					this.article.matchInfos[index].expertForecasts.push(data.data)
				}
			},
			//玩法选择互斥
			resetForecast(type, activeType, resetType, index) {
				if(type == activeType){
					let matchForecast = this.article.matchInfos[index].expertForecasts
					matchForecast = matchForecast.filter(item => item.forecastType != resetType)
					this.article.matchInfos[index].expertForecasts = matchForecast
					
					this.$set(this.activeReset, index, resetType)
					this.$nextTick(()=>{
						this.$set(this.activeReset, index, '')
					})
					this.$forceUpdate()
				}
			},
			getForecast(val){
				console.log(val,'===')
				this.jqIsBig=val.jq
				this.dxqIsBig=val.dxq
			},
			//数据校验
			testArticleValue(formData) {
				return new Promise((resolve,reject)=>{
					if(!formData.matchInfos[0]){
						uni.showToast({
							title: '请选择比赛',
							icon: 'none'
						})
						reject(formData)
					}else{
						for(let match of formData.matchInfos){
							if(!match.matchId){
								uni.showToast({
									title: '请选择比赛',
									icon: 'none'
								})
								reject(formData)
								break
							}else{
								if(match.expertForecasts[0]){
									if(match.lotteryType == 101){
										let test = match.expertForecasts.every((item)=>{
											return item.forecastType == 'rqsf' || item.forecastType == 'dxq'
										})
										if(test){
											uni.showToast({
												title: '请推荐竞彩玩法',
												icon: 'none'
											})
											reject(formData)
											break
										}
									}
								}else{
									uni.showToast({
										title: '请推荐玩法',
										icon: 'none'
									})
									reject(formData)
									break
								}
							}
						}
					}
					resolve(formData)
				})
			},
			//富文本图片上传替换
			relpaceUrlImage(html, flag) {
				return new Promise((resolve,reject)=>{
					let imgReg = /<img.*?(?:>|\/>)/gi;
					let imgList = html.match(imgReg);
					if (imgList != null) {
						let len = imgList.length
						let rpNum = 0
						imgList.forEach( async (item) => {
							let srcReg = /src=['"]?([^'"]*)['"]?/i
							var src = item.match(srcReg)
							var url = src[1]
							if(url.indexOf(this.imageDomain) > -1){
								rpNum += 1
								if(rpNum == len){
									resolve(html);
								}
							}else{
								let name = Date.now() + '.png'
								let type = 'image/png'
								try{
									await this.convertImgToBlob(url, (blob)=>{
										let file = new window.File([blob], name, { type: type })
										this.qiniuUploadImage(file).then((res)=>{
											let newSrc = this.imageDomain + '/' + res.key
											html = html.replace(src[1], newSrc)
											if(flag == 'free'){
												this.article.freeContent = html
											}else if(flag == 'vip'){
												this.article.content = html
											}else if(flag == 'video'){
												this.article.freeContent = html
											}
											console.log(html);
											rpNum += 1
											if(rpNum == len){
												resolve(html);
											}
										}).catch((res)=>{
											console.log(res);
											reject(false);
											this.$ShowLoading({show: false})
											uni.showToast({
												title: '图片上传失败，请检查网络并重试',
												icon: 'none'
											})
											throw new Error('upload error');
										})
									}, (url)=>{
										console.log(url);
										reject(false);
										this.$ShowLoading({show: false})
										uni.showToast({
											title: '图片上传错误，请检查网络并重试',
											icon: 'none'
										})
										throw new Error('upload error');
									})
								}catch(e){
									console.log(e);
									reject(false);
									this.$ShowLoading({show: false})
									uni.showToast({
										title: '图片上传异常，请检查网络并重试',
										icon: 'none'
									})
								}
							}
						})
					}else{
						resolve(html);
					}
				})
			},
			//图片Blob转换
			convertImgToBlob(url, callback, error) {
				const img = new Image()
				img.crossOrigin = 'Anonymous' 
				img.onload = function () {
					let canvas = document.createElement('canvas')
					const ctx = canvas.getContext('2d')
					canvas.height = this.height
					canvas.width = this.width
					ctx.drawImage(this, 0, 0)
					canvas.toBlob(callback)
					canvas = null
				}
				img.onerror = function() {
					error(url)
				}
				img.src = url
			},
			//七牛上传图片
			qiniuUploadImage(file) {
				return new Promise((resolve,reject)=>{
					let type = file.type.substr(6)
					let randomStr = this.$CHS.randomString(10)
					let key = Date.now() + randomStr + 'H5.' + type
					const observer = {
						next(res){
							console.log(res);
						},
						error(err){
							console.log(err);
							reject(err)
						},
						complete(res){
							console.log(res);
							resolve(res)
						}
					}
					const options = {
						quality: 0.4,
						noCompressIfLarger: true
					}
					//压缩图片
					qiniu.compressImage(file, options).then(data => {
						const observable = qiniu.upload(data.dist, key, this.token)
						const subscription = observable.subscribe(observer) // 上传开始
					})
				})
			},
			//检测字数
			inputBlur(e) {
				if(e.detail.value) {
					if(e.detail.value.length < 10){
						uni.showToast({
							title: '标题不少于10个字',
							icon: 'none'
						})
					}
				}else{
					uni.showToast({
						title: '请输入标题',
						icon: 'none'
					})
				}
			},
			//检测输入字数
			inputTitle(e) {
				if(e.detail.value) {
					if(e.detail.value.length >= 30){
						uni.showToast({
							title: '标题最多30个字',
							icon: 'none'
						})
					}
				}
			},
			//标题输入换行
			lineChange(e){
				console.log(e);
				this.lineCount = e.detail.lineCount
			},
			//前往编辑器编辑富文本
			goEditor(type){
				uni.setStorageSync('article_'+type, this.article[type]);
				uni.$once(type+'_Change', (html)=>{
					console.log(html);
					this.article[type] = html
					uni.removeStorageSync('article_'+type);
				})
				this.$goByName('contenteditor', {type})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body{
		padding-top: 170rpx;
		margin-bottom: calc(120rpx + var(--safe-area-inset-bottom) + var(--vh-offset, 0px));
		background-image: url('~@/public/images/bar/fbmffa.jpg');
		background-size: 100%;
		background-position: top left;
		background-repeat: no-repeat;
		.list{
			margin-bottom: 20rpx;
			background-color: #FFFFFF;
			&.radius{
				border-radius: 10rpx 10rpx 0rpx 0rpx;
			}
			.list-title{
				margin: 0 20rpx;
				height: 97rpx;
				font-weight: 500;
				border-bottom: 1rpx solid #EDEDED;
			}
			.list-item{
				margin: 0 20rpx;
				padding: 30rpx 0;
				align-items: center;
				border-bottom: 1rpx solid #EDEDED;
				.item-title{
					flex: 2;
					align-items: center;
					line-height: 30rpx;
					font-size: 30rpx;
					image{
						margin-right: 20rpx;
						width: 13rpx;
						height: 12rpx;
					}
				}
				.item-right{
					align-items: center;
					.active, .status{
						margin-right: 10rpx;
					}
					.status{
						font-size: 28rpx;
						color: #b3b3b3;
						line-height: 28rpx;
					}
					.textarea{
						max-width: 520rpx;
						height: auto;
						font-size: 28rpx;
						line-height: 36rpx;
						/deep/ .textarea-placeholder{
							font-size: 28rpx;
							color: #B3B3B3;
						}
						&.tar{
							text-align: right;
						}
						&.tal{
							text-align: left;
						}
					}
				}
				.item-select{
					width: 100%;
					justify-content: space-between;
				}
				.item-playbox{
					.mt2{
						margin-top: 30rpx;
					}
					/deep/ .wanfa:first-child{
						margin-top: 30rpx;
					}
				}
				.item-match{
					width: calc(100% - 60rpx);
					margin-top: 30rpx;
					padding: 30rpx;
					background-color: #F2F5FA;
					border-radius: 10rpx;
					.match-desc{
						width: 100%;
						.left, .right{
							width: 120rpx;
						}
						.center{
							flex: 2;
							.datetime{
								margin-right: 18rpx;
							}
						}
					}
					.match-info{
						width: 100%;
						margin-top: 20rpx;
						align-items: flex-start;
						line-height: 36rpx;
						.home, .away{
							flex: 2;
							font-size: 26rpx;
							.text-bold{
								max-width: 200rpx;
								line-height: 36rpx;
								word-break: break-all;
								word-wrap: break-word;
							}
							.color-grey{
								line-height: 36rpx;
							}
						}
						.home{
							justify-content: flex-end;
							text-align: right;
							.color-grey{
								margin-right: 10rpx;
							}
						}
						.away{
							text-align: left;
							.color-grey{
								margin-left: 10rpx;
							}
						}
						.color-black{
							align-self: flex-start;
							align-items: center;
							margin: 0 26rpx;
							font-size: 28rpx;
							font-family: Roboto;
							height: 36rpx;
							line-height: 1;
							letter-spacing: -2rpx;
						}
					}
				}
			}
			.list-item:last-child{
				border: none;
			}
		}
	}
	.foot{
		max-width: $max-width;
		margin: $pc-margin;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		box-shadow: 0px -1px 0px 0px #EDEDED;
		z-index: 5;
		.submit-box{
			margin: 16rpx 20rpx;
			button{
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 44rpx;
			}
		}
	}
</style>